<template>
  <main>
    <div class="plane">
      <form action="">
        <div class="line">
          <label for="name"><i class="fa fa-user"></i></label>
          <input id="name" type="text" placeholder="请填写您的姓名" />
        </div>
        <div class="line">
          <label for="email"><i class="fa fa-envelope"></i></label>
          <input id="email" type="email" placeholder="请填写您的邮箱" />
        </div>
        <div class="line">
          <label for="phone"><i class="fa fa-phone"></i></label>
          <input id="phone" type="text" placeholder="请填写您的电话号码" />
        </div>
        <div class="line">
          <label for="job"><i class="fa fa-briefcase"></i></label>
          <input id="job" type="text" placeholder="请填写您想要应聘的岗位" />
        </div>
        <textarea
          placeholder="简单做个自我介绍,并说明一下您的爱好特长,以往的工作经历"
        ></textarea>
        <button class="btn animated" type="submit">提交</button>
      </form>
    </div>
  </main>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
main {
  display: block;
  background: url(../../assets/img/joinus/foods.jpg) no-repeat center center /
    cover;
  height: 100vh;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // background-color: rgba(255, 255, 255, .5);
  }
  .plane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    form {
      position: relative;
      width: 500px;
      padding: 90px 36px 30px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      &::before {
        content: "";
        display: block;
        height: 80px;
        background-color: red;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        border-radius: 20px 20px 0 0;
      }
      .line {
        position: relative;
        label {
          display: inline-block;
          width: 100px;
          text-align: right;
          line-height: 38px;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: 3px;
          top: 5px;
          background-color: red;
          color: #fff;
        }
        input {
          width: 100%;
          line-height: 40px;
          border-radius: 22px;
          padding: 0 5px 0 42px;
          box-sizing: border-box;
          font-size: 20px;
          color: red;
          margin: 2px 0;
        }
      }
      textarea {
        width: 100%;
        min-height: 10em;
        border-radius: 15px;
        box-sizing: border-box;
        padding: 0.5em 1em;
        resize: none;
        color: red;
      }
      button {
        border: none;
        margin: 5px auto 0;
      }
    }
  }
}

/* 按钮样式工具类 */
.btn {
  display: block;
  width: 100px;
  color: #fff;
  line-height: 40px;
  border-radius: 22px;
  font-size: 18px;
  background-color: red;
  cursor: pointer;
}
</style>